<template>
  <view class="page">
    <image
      :lazy-load="true"
      class="bg"
      :src="imgBaseUrlV0 + 'maintenance-record-bg.png'"
      mode="aspectFill"
    ></image>

    <view class="main">
      <view class="title" v-if="equipment !== null">
        <text class="chn">{{ equipment.name }}</text>
        <text class="en">hydralic record</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getDateTime } from "@/common/util.js";
import { getEquipmentOperationRecords2 } from "@/common/api/equipment-operation-record.js";

import { imgBaseUrl, imgBaseUrlV0 } from "@/common/config/index";
export default {
  data() {
    return {
      imgBaseUrlV0,
      equipment: null,
      listQuery: {
        search: null,
        page: 1,
        limit: 20,
        sort: {
          id: "",
        },
        equipmentId: null,
      },
      equipmentOperationRecords: [],
    };
  },
  async onLoad(e) {
    if (e.equipment !== undefined) {
      this.equipment = JSON.parse(decodeURIComponent(e.equipment));
      this.listQuery.equipmentId = this.equipment.id;
    }

    this.init();
    await this.initData();
  },
  async onPullDownRefresh() {
    await this.handleFilter();
  },
  async onReachBottom() {
    this.listQuery.page++;
    await this.getEquipmentOperationRecords();
  },
  methods: {
    getDateTime,
    init() {
      uni.setNavigationBarTitle({
        title: this.equipment.name + "液压液记录",
      });
    },
    async initData() {
      await this.getEquipmentOperationRecords();
    },
    async handleFilter() {
      this.listQuery.page = 1;
      this.customers = [];
      await this.getEquipmentOperationRecords();
    },
    async getEquipmentOperationRecords() {
      await getEquipmentOperationRecords2(this.listQuery).then((response) => {
        const { list, total } = response;
        list.forEach((e) => {
          e.fold = true;
        });
        this.equipmentOperationRecords.push(...list);
        if (this.listQuery.page === 1) {
          if (this.equipmentOperationRecords.length !== 0) {
            this.equipmentOperationRecords[0].fold = false;
          }
        } else if (list.length == 0) {
          this.listQuery.page--;
        }
      });
      uni.stopPullDownRefresh();
    },
    toggleFold(e) {
      e.fold = !e.fold;
      this.$forceUpdate();
    },
  },
};
</script>

<style lang="scss" scoped>
page,
.page {
  min-height: calc(100vh - var(--window-top));
  background-color: #3f7dff;

  position: relative;
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.main {
  position: relative;
  z-index: 2;

  .title {
    padding-top: 50rpx;
    padding-bottom: 30rpx;
    text-align: center;

    .chn {
      display: block;
      font-size: 32rpx;
      font-weight: 700;
      line-height: 70rpx;
      color: #fff;
    }
    .en {
      display: block;
      font-size: 22rpx;
      line-height: 30rpx;
      color: #889dbf;
    }
  }

  .maintenance-view {
    padding: 30rpx;
  }
  .maintenance-record-group {
    background-color: #fff;
    padding: 30rpx;
    margin-bottom: 30rpx;
    border-radius: 10rpx;

    &:last-child {
      margin-bottom: 0;
    }
    .info {
      display: flex;
      flex-direction: row;

      .check-date-view {
        flex: 1;

        .check-date-icon {
          width: 50rpx;
          vertical-align: middle;
        }
        .check-date {
          padding: 0 20rpx;
          font-size: 30rpx;
          font-weight: 700;
          color: #434343;
        }
        .status-normal,
        .status-error {
          font-size: 24rpx;
          padding: 0 8rpx;
          border: 3rpx solid #000;
          border-radius: 20rpx;
          border-bottom-left-radius: 0;
        }
        .status-normal {
          border-color: #6cca92;
          color: #6cca92;
        }
        .status-error {
          border-color: #f56e56;
          color: #f56e56;
        }
      }
      .fold-icon {
        vertical-align: middle;
      }
    }
    .maintenance-records {
      padding: 20rpx 0;

      .maintenance-record {
        padding: 20rpx;
        padding-left: 30rpx;
        font-size: 28rpx;
        font-weight: 700;
        background-color: #e8edf4;
        color: #636363;
        border-radius: 5rpx;
        margin-bottom: 10rpx;
        position: relative;

        &:last-child {
          margin-bottom: 0;
        }
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          width: 8rpx;
          height: 30rpx;
          margin-top: -15rpx;
          border-radius: 5rpx;
          background-color: #3bbcba;
        }
        .title {
          // flex: 1;
        }
        .value {
          float: right;
        }
      }
    }
  }
}
</style>